// import setXYZMap from '../ol/XYZ/setXYZMap'
import 'ol/ol.css';
import * as OL from '../ol'

class XYZMap_cop {
    // /**
    //  @constructor XYZMap_cop
    //  * @description 加载底图。 可用于加载XYZ的地图，如天地图、高德地图、百度地图等。
    //  * @param {String | HTMLElement} container - map容器
    //  * @param {Object} options - map初始化参数
    //  * @property {Array<Number>} [options.center=[0, 0]] - 初始化中心点(可选)
    //  * @property {Number} [options.zoom=4] - 初始化级别(可选)
    //  * @property {String} options.url - 底图地址
    //  * @property {Boolean} [options.wrapX=false] - 设置是否在地图水平坐标轴上重复(可选)
    //  * @example <caption>加载 XYZ 地图</caption>
    //  * // 使用 new XYZMap_cop,需传入元素ID，和它的options
    //  * let map = new GISMap.XYZMap_cop('map',{
    //  *     zoom: 4,
    //  *     center:[104.36522215092073,34.73011985764974],
    //  *     url:'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
    //  * })
    //  * // 获取当前底图对象
    //  * console.log(map._map);
    //  */
    constructor(container, options) {
        /**
        * 获取当前地图对象
        * @type {Object}
        */
        this._map = "{}";
        if(typeof container === 'string') container = document.getElementById(container)
        options = {
            center: [0, 0],
            zoom: 4,
            url:'',
            wrapX:false,
            ...options
        }
        // 获取地图对象
        this._map = new setXYZMap(container, options).getMap()
    }
    // /**
    //  * @description 为底图添加XYZ的图层。
    //  * @param {Object} option - 图层初始化参数
    //  * @property {String} option.url - 图层地址XYZ
    //  * @property {String} [option.layerId] - 图层id(可选)
    //  * @property {String} [option.zIndex] - zIndex(可选)
    //  * @property {Number} [option.opacity=0.7] - 不透明度，取值范围为 0（完全透明）到 1（完全不透明）(可选)
    //  * @property {Number} [option.minZoom=default] - 最小显示等级(可选)
    //  * @property {Number} [option.maxZoom=default] - 最大显示等级(可选)
    //  * @example
    //  * // map._map 为底图对象，options为添加图层的初始化参数
    //  * map.addXYZLeary({
    //  *     url:'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=6'
    //  * })
    //  */
    addXYZLeary(option) {
        let source = new OL.source.XYZ({
            url: option.url
        })
        let layer =  new OL.layer.Tile({
            source: source
        })
        this._map.addLayer(layer)
        // // 为图层设置唯一的 ID
        if (option.layerId) layer.set('id', option.layerId);
        // // 设置图层索引
        if (option.zIndex) layer.set('zIndex', option.zIndex);
        // 设置不透明度，取值范围为 0（完全透明）到 1（完全不透明）
        if (option.opacity) layer.setOpacity(option.opacity);
        // 设置最小缩放层级
        if (option.minZoom) layer.setMinZoom(option.minZoom);
        // 设置最大缩放层级
        if (option.maxZoom) layer.setMaxZoom(option.maxZoom);
    }
    // /**
    //  * @description 为底图添加WFS的图层。
    //  * @param {Object} options - 图层初始化参数
    //  * @property {String} options.url - WFS 服务地址
    //  * @property {String} [options.layerName] - WFS 图层的名称.例：cite:railway
    //  * @property {String} [options.format] -WFS 数据的格式。格式包括 GeoJSON、GML、KML 等。
    //  * @property {Number} [options.styleFunction] - 不透明度，取值范围为 0（完全透明）到 1（完全不透明）(可选)
    //  * @property {Number} [options.EPSG=3857] - 坐标系。4326、3857、4490 等
    //  * @example
    //  * map.addWFSLeary({
    //  *     url:"http://localhost:8089/geoserver/cite/ows",
    //  *     layerName:'cite:railway',
    //  *     format:'GML',
    //  *     styleFunction:'',
    //  *     EPSG:'3857'
    //  *   })
    //  */
    addWFSLeary(options) {
        let EPSG = options.EPSG || '3857';
        let vectorSource  = new OL.source.Vector({
            format: new OL.format[options.format](),
            url: function(extent) {
                return (
                    options.url + '?service=WFS&' +
                    'version=1.1.0&request=GetFeature&typename='+ options.format +'&' +
                    'outputFormat=application/json&srsname=EPSG:3857&' +
                    'bbox=' +
                    extent.join(',') +
                    ',EPSG:' + EPSG
                );
            },
            strategy: OL.loadingstrategy.bbox
        });
        const vector = new OL.layer.Vector({
            source: vectorSource,
            style: {
                'stroke-width': 0.75,
                'stroke-color': 'white',
                'fill-color': 'rgba(100,100,100,0.25)',
            },
        });
        console.log(vector);
        this._map.addLayer(vector);
    }
}
export default XYZMap_cop

